<template>
  <div class="todo-container">
    <div class="todo-wrap">
      <!--      <TodoHeader @addTodo="addTodo" /> &lt;!&ndash; 给TodoHead 标签对象绑定addTodo事件监听 &ndash;&gt;-->
      <TodoHeader ref="todoHead"/>
      <TodoList :todos="todos"></TodoList>
      <TodoFoot>
        <input type="checkbox" v-model="isAllCheck" @click="handleSelectAll" slot="checkAll"/>
        <span slot="count">已完成{{completeSize}}/ 全部{{this.todos.length}}</span>
        <button class="btn btn-danger" @click="this.deleteCompleteTodos" v-show="completeSize>0" slot="delete">清除已完成任务
        </button>
      </TodoFoot>
    </div>
  </div>
</template>

<script>
  import PubSub from 'pubsub-js';
  import TodoHeader from "./components/TodoHeader";
  import TodoList from "./components/TodoList";
  import TodoFoot from "./components/TodoFoot";
  import storageUtil from './util/storageUtil'

  export default {
    name: "App",
    components: {TodoHeader, TodoList, TodoFoot},
    data() {
      return {
        // 从localStorage 读取todos
        // todos: JSON.parse(window.localStorage.getItem('todos_key') || '[]') // 解析json字符串
        todos: storageUtil.readTodos()
        /*todos: [// 数据在哪定义，操作数据的行为就在那定义
          {title: 'xxx', complete: false},
          {title: 'yyy', complete: true},
        ]*/
      }
    },
    computed: {
      // 完成数量
      completeSize() {
        // return this.todos.filter(todo => todo.complete).length
        return this.todos.reduce((preTotal, todo) => preTotal + (todo.complete ? 1 : 0), 0);
      },
      // 读取他的值，还得监视他的变化
      isAllCheck: {
        // 读取值
        get() {
          const {completeSize, todos} = this;
          return completeSize > 0 && completeSize === todos.length
        },
        // 监视变化
        set(value) { // 最新的状态属性值
          this.selectAllTodos(value);
        }
      }
    },
    methods: {
      // 添加todo
      addTodo(todo) {
        this.todos.unshift(todo);
      },
      // 删除todo
      deleteTodo(index) {
        this.todos.splice(index, 1);
      },
      // 删除完成的todos
      deleteCompleteTodos() {
        this.todos = this.todos.filter(todo => !todo.complete);
      },
      // 全选 或者全部选 todo
      selectAllTodos(isCompleteAll) {
        this.todos = this.todos.map(todo => {
          return {
            title: todo.title,
            complete: isCompleteAll
          }
        })
      },
      handleSelectAll() {
        this.selectAllTodos(!this.isCompleteAll);
      }
    },
    watch: {
      /*todos(newVal) { // 只能监视属性的变化
        // 存储到localStorage
      }*/
      todos: {// 深度监视,可以监视到属性内部的变化
        deep: true,
        /*handler: function (newValue, oldValue) {
          // 将todos最新的值保存到localStorage
          // window.localStorage.setItem("todos_key", JSON.stringify(newValue));
          storageUtil.saveTodos(newValue);
        }*/
        handler: storageUtil.saveTodos

      }
    },
    mounted() {
      // 给组件绑定监听事件
      // 给  <TodoHeader/> 绑定addTodo事件监听
      // this.@on('addTodo', this.addTodo); // 这是给app绑定了事件监听，这是不对的
      this.$refs.todoHead.$on('addTodo', this.addTodo); // 通过ref属性定位标签，然后在绑定，这样子才对

      // 订阅deleteTodo
      PubSub.subscribe('deleteTodo', (msg, index) => {
        this.deleteTodo(index)
      }) // 因为会传递两个参数过来，我们可以通过函数的二次调用，这样子就不需要修改源代码了

    }
  }
</script>

<style scoped>
  /*app*/
  .todo-container {
    width: 600px;
    margin: 0 auto;
  }

  .todo-container .todo-wrap {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
  }

</style>
